<template>
  <div>
    <Input @add="addHandle" />
    <List :list="list" @delete="deleteHandle" />
    <span>{{id}}---{{name}}---{{disabled}}</span>
    <child-props v-bind="$props" />
  </div>
</template>

<script>
import Input from "./Input";
import List from "./List";
import ChildProps from "./childProps";
export default {
  components: {
    Input,
    List,
    ChildProps
  },
  props: {
    id: {
      type: String
    },
    name: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: "我不知道"
    }
  },
  data() {
    return {
      list: [
        {
          id: "id-1",
          title: "任务1"
        },
        {
          id: "id-2",
          title: "任务2"
        }
      ]
    };
  },
  methods: {
    addHandle(title) {
      this.list.push({ id: "id-" + Date.now(), title });
    },
    deleteHandle(id) {
      this.list = this.list.filter(item => item.id !== id);
    }
  },
  mounted() {
    console.log("A mounted");
  }
};
</script>